<!--
Put this file in /layouts/shortcodes/figure.html
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="{{ "/css/hugo-easy-gallery.css" | absURL }}" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 -}}
<!-- use either src or link-thumb for thumbnail image -->
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}{{ with .Get "align" }} {{.}}{{end}}"{{ with .Get "width" }} style="max-width:{{.}}{{ if eq (len (trim . "0123456789")) 0 }}px{{ end }};"{{end}}>
  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img"{{ if .Parent }} style="background-image: url('{{ print .Site.BaseURL $thumb }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
      <img {{ with .Get "img-class" }}class="{{.}}"{{ end }} itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}{{ with .Get "height" }} style="max-height:{{.}}{{ if eq (len (trim . "0123456789")) 0 }}px{{ end }};"{{end}} /><!-- <img> hidden if in .gallery -->
    </div>
    {{ with .Get "link" }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
      <figcaption>
        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
        {{- if or (.Get "caption") (.Get "attr")}}
          <p>
            {{- .Get "caption" | markdownify -}}
            {{- with .Get "attrlink"}}<a href="{{.}}">{{- end }}
              {{ .Get "attr" }}
            {{- if .Get "attrlink"}}</a>{{ end }}
          </p>
        {{- end }}
      </figcaption>
    {{- end }}
  </figure>
</div>
